<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./img/logo.ico" />
    <title>展示页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="./css/elementUI.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />

    <link rel="stylesheet" href="./css/index.css" />
    <!-- import Vue before Element -->
    <script src="./js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="./js/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container>
        <!-- 顶栏容器（导航栏） -->
        <el-header>
          <el-row class="nav" :gutter="1">
            <!-- 网站logo -->
            <el-col :span="5"
              ><div>
                <img
                  style="width: 100px; vertical-align: middle"
                  src="./img/logo.png"
                  alt="无"
                /></div
            ></el-col>
            <!-- 网站导航 -->
            <el-col :span="12"
              ><div>
                <el-menu
                  background-color="rgb(51, 51, 51)"
                  text-color="white"
                  active-text-color="rgb(64, 158, 255)"
                  :default-active="activeIndex"
                  mode="horizontal"
                >
                  <el-menu-item index="1">
                    <a href="index.html">home</a>
                  </el-menu-item>
                  <el-menu-item index="2"
                    ><a href="https://blog.csdn.net/weixin_51591826?type=blog"
                      >通用采集器</a
                    ></el-menu-item
                  >
                  <el-menu-item index="3"
                    ><a href="https://blog.csdn.net/weixin_51591826?type=blog"
                      >数据模型</a
                    ></el-menu-item
                  >
                  <el-menu-item index="4"
                    ><a href="https://blog.csdn.net/weixin_51591826?type=blog"
                      >数据分析</a
                    ></el-menu-item
                  >
                  <el-menu-item index="5"
                    ><a href="https://blog.csdn.net/weixin_51591826?type=blog"
                      >数据仓库</a
                    ></el-menu-item
                  >
                  <el-menu-item index="6"
                    ><a href="https://blog.csdn.net/weixin_51591826?type=blog"
                      >utils</a
                    ></el-menu-item
                  >
                </el-menu>
              </div></el-col
            >
            <!-- 注册/登录 -->
            <el-col :span="5"
              ><div>
                <el-button size="mini" type="primary">注册</el-button>
                <el-button size="mini">登录</el-button>
              </div></el-col
            >
          </el-row>
        </el-header>
        <!-- 主要区域容器（轮播图） -->
        <el-main>
          <div>
            <el-carousel
              autoplay
              :interval="1000"
              arrow="always"
              height="670px"
            >
              <el-carousel-item v-for="item in imgList" :key="item.id">
                <h3><img :src="item.idView" /></h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-main>
        <!-- 底栏容器 （底部内容）-->
        <el-footer>
          <el-row class="footer" :gutter="5">
            <!-- 网站logo -->
            <el-col :span="6"
              ><div>
                <el-button type="info" plain>ajython介绍</el-button>
              </div></el-col
            >
            <!-- 注册/登录 -->
            <el-col :span="6"
              ><div>
                <el-button type="info" plain>关于我们</el-button>
              </div></el-col
            >
            <el-col :span="6"
              ><div>
                <el-tooltip placement="top">
                  <div slot="content">
                    微信：xxx<br />手机号：xxx<br />公众号：xxx
                  </div>
                  <el-button type="info" plain>联系我们</el-button>
                </el-tooltip>
              </div></el-col
            >
            <el-col :span="6"
              ><div>
                <el-button type="info" plain>其他介绍</el-button>
              </div></el-col
            >
          </el-row>
          <p style="width: 100%">
            Copynight © 2023-2024 个人展示页面 版权所有 Power by Power by Mine
          </p>
        </el-footer>
      </el-container>
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            activeIndex: '1',
            imgList: [
              { id: 0, idView: './img/01.jpg' },
              { id: 1, idView: './img/02.jpg' },
              { id: 2, idView: './img/03.jpg' },
              { id: 3, idView: './img/04.jpg' },
              { id: 4, idView: './img/05.jpg' },
              { id: 5, idView: './img/06.jpg' }
            ]
          }
        }
      })
    </script>
  </body>
</html>
